<template>
  <div class="foot_box">
    <div class="conpany_info" v-if="!isMobile">
      <div class="wrapper footer">
        <div class="fl info">
          <ul class="company_menu">
            <li @click="aboutUs">公司信息</li>
            <li @click="business">商务合作</li>
            <li @click="joinUs">人才招聘</li>
          </ul>

          <ul class="info_list">
            <li>
              <span>友情链接 : </span>
              <span><a href="http://jw.beijing.gov.cn/" target="_blank">北京市教委</a></span>
              <span><a href="http://www.tzkszx.cn/" target="_blank">通州区教委</a></span>
              <span><a href="http://www.bjchy.gov.cn/" target="_blank">朝阳区教委</a></span>
              <span><a href="http://www.ysxiao.cn/" target="_blank">北京幼升小</a></span>
              <span><a href="http://pkuls.pku.edu.cn/" target="_blank">北大学习科学实验室</a></span>
            </li>
            <li>邮箱 : business@aoejy.com</li>
            <li>电话 : 010-56863848<span style="margin-left: 10px;">工作日 : 9:00-19:00</span></li>
          </ul>

        </div>
        <div class="fr qrcode">
					<div class="qrcode_img">
						<img src="../../assets/image/wxQrcode.jpg" alt="">
					</div>
					<span>了解最新小学入学政策等？扫码关注我吧</span>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class="conpany_info mobile_info" v-if="isMobile">
      <div class="wrapper footer">
        <div class="fl info">
          <ul class="company_menu">
            <li @click="aboutUs">公司信息</li>
            <!-- <li>公司信息</li> -->
            <li @click="business">商务合作</li>
            <li @click="joinUs">人才招聘</li>
          </ul>

          <ul class="info_list">
            <li>
              <span>友情链接 : </span>
              <span><a href="http://jw.beijing.gov.cn/" target="_blank">北京市教委</a></span>
              <span><a href="http://www.tzkszx.cn/" target="_blank">通州区教委</a></span>
              <span><a href="http://www.bjchy.gov.cn/" target="_blank">朝阳区教委</a></span>
              <span><a href="http://www.ysxiao.cn/" target="_blank">北京幼升小</a></span>
              <span><a href="http://pkuls.pku.edu.cn/" target="_blank">北大学习科学实验室</a></span>
            </li>
          </ul>

        </div>
        <div class="fl qrcode">
					<ul class="fl">
						<li>邮箱 : business@aoejy.com</li>
            <li>电话 : 010-56863848</li>
            <li>工作日 : 9:00-19:00</li>
					</ul>
					<div class="qrcode_img fr">
						<img src="../../assets/image/wxQrcode.jpg" alt="">
					</div>
					<div class="clear"></div>
					<span>了解最新小学入学政策等？扫码关注我吧</span>
        </div>
        <div class="clear"></div>
      </div>
    </div>


    <div class="copy_right" :class="{'mobile_copyright' : isMobile}">Copyright©2018北京阿喔阿国际教育科技有限公司版权所有</div>
  </div>
</template>

<script>
export default {
	name: 'copyRight',
	data() {
		return {
			isMobile: false,
		}
	},
	created() {
		this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
	},
	methods: {
		aboutUs() {
			this.$router.push({
				name: 'about'
			})

			window.scrollTo(0,0);
		},
		joinUs() {
			this.$router.push({
				name: 'join'
			})

			window.scrollTo(0,0);
		},
		business() {
			this.$router.push({
				name: 'business'
			})

			window.scrollTo(0,0);
		},
	},
}
</script>

<style>
	
	.foot_box > div:not(.mobile_info){
		min-width: 1200px;
	}
	.foot_box .mobile_copyright {
		width: 100% !important;
		min-width: 100% !important;
		font-size: .32rem !important;
	}
	.mobile_container .wrapper {
		width: 100% !important;
	}
	.mobile_container .conpany_info {
		height: auto !important;
		padding: 0 .533333rem;
		box-sizing: border-box;
	}
	.mobile_container .company_menu li {
		margin-right: 1.066667rem !important;
	}
	.mobile_container .info_list{
		margin-top: .533333rem !important;
	}
	.mobile_container .conpany_info .qrcode {
		margin-left: 0 !important;
		margin-bottom: .266667rem;
	}
	.mobile_container .conpany_info .qrcode li {
		font-size: .373333rem;
	}
	.mobile_container .conpany_info .qrcode span {
		font-size: .48rem;
	}
	.mobile_container .qrcode .qrcode_img{
		margin-bottom: .4rem !important;
	}

	.mobile_container .conpany_info .wrapper {
		padding-top: .533333rem !important;
	}
</style>
<style scoped>
  /*================== footer ====================*/
	.conpany_info {
		height: 280px;
		width: 100%;
		background: #424242;
	}
	.conpany_info .info {
		color: #fff;
		font-size: 14px;
	}
	.conpany_info .wrapper {
		padding-top: 75px;
	}
	.company_menu li{
		display: inline-block;
		cursor: pointer;
		margin-right: 96px;
	}
	.info_list span a {
		color: #FFFFFF;
	}
	.info_list {
		margin-top: 68px;
	}
	.info_list li {
		margin-bottom: 20px;
	}
	.info_list span {
		margin-right: 35px;;
		cursor: pointer;
	}
	.info_list span:first-child{
		margin-right: 0;
	}
	.conpany_info .qrcode {
		color: #fff;
		margin-left: 50px;
	}
	.qrcode .qrcode_img {
		width: 136px;
		height: 136px;
		margin: 0 auto;
		margin-bottom: 30px;;
	}
	.qrcode .qrcode_img img {
		width: 100%;
	}
	.copy_right {
		height: 60px;
		width: 100%;
		background: #000;
		text-align: center;
		color: #fff;
		line-height: 60px;
		font-size: 14px;
	}

/*================== footer ====================*/
</style>